<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>服务分配</title>
    <link rel="stylesheet" href="/box/assets/css/style.css">
    <link rel="stylesheet" href="/box/assets/css/loader-style.css">
    <link rel="stylesheet" href="/box/assets/css/bootstrap.css">
    <link rel="stylesheet" href="/box/layui/css/layui.css">
    <script src="/box/js/jquery-3.3.1.js"></script>
    <script src="/box/layui/layui.js"></script>
    <script src="/box/js/config.js"></script>
    <link rel="shortcut icon" href="/box/assets/ico/minus.png">
    <style>
        .box-pad {
            padding: 1%
        }
        #distri {
            display: none;
            padding: 30px 50px 0 50px;
        }
    </style>
</head>

<body style="background: none">
    <div id="distri">
        <form class="layui-form" id="distriForm" lay-filter="distriForm">
            <input type="hidden" name="serviceId">
            <input type="hidden" name="state" id="serviceState">
            <div class="layui-form-item">
                <label class="layui-form-label">分配给：</label>
                <div class="layui-inline">
                    <select id="distriId" name="distriId">
                        <option value="-1">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分配时间：</label>
                <div class="layui-input-inline">
                    <input type="text" name="distriTime" id="distriTime" class="layui-input" readonly>
                </div>
            </div>
        </form>
    </div>
    <div class="box-pad">
        <h1>服务分配</h1>
        <hr>
        <form class="layui-form" id="topForm" lay-filter="topForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">客户名：</label>
                    <div class="layui-inline">
                        <input type="text" id="customerName" class="layui-input" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">概要：</label>
                    <div class="layui-inline">
                        <input type="text" id="outline" class="layui-input" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">服务类型：</label>
                    <div class="layui-inline">
                        <select id="serviceType">
                            <option value="-1">请选择</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="layui-btn" style="margin-bottom: 10px" onclick="selects()">查询</button>
            </div>
        </form>
        <table class="layui-table" lay-filter="distriTable" id = "distriTable"></table>
        <script>
            //  layui渲染
            var table;
            layui.use(['table','form'], function () {
                table = layui.table;
                var form = layui.form;
                //  获取时间
                function getNow(s) {
                    return s < 10 ? '0' + s: s;
                }
                function dates() {
                    var now = new Date();
                    //格式化日，如果小于9，前面补0
                    var day = ("0" + now.getDate()).slice(-2);
                    //格式化月，如果小于9，前面补0
                    var month = ("0" + (now.getMonth() + 1)).slice(-2);
                    var h = now.getHours();
                    var minute = now.getMinutes();
                    var s = now.getSeconds();
                    //拼装完整日期格式
                    var today = now.getFullYear()+"-"+(month)+"-"+(day)+" "+getNow(h)+":"+getNow(minute)+":"+getNow(s);
                    return today;
                }
                //  给服务类型赋值
                $.get("http://localhost:8888/dictionary/serviceType", function (d) {
                    $.each(d.data,function () {
                        var options = $("<option></option>").appendTo("#serviceType");
                        options.text(this.entry).val(this.name);
                        form.render("select", "topForm");
                    });
                });
                //  给分配人赋值
                $.get("http://localhost:8888/user/byRoleId", function (d) {
                    $.each(d.data,function () {
                        var options = $("<option></option>").appendTo("#distriId");
                        options.text(this.userName).val(this.userId);
                    });
                    form.render("select", "distriForm");
                });

                table.render({
                    elem: '#distriTable'
                    , url: 'http://localhost:8888/service/list?state=1'
                    , text: {none: '没有查到相关数据'}
                    , even: true
                    , page: true
                    , limit: 10
                    , cols: [[
                        {field: 'serviceId', width: 60, title: '编号'}
                        , {field: 'customerName', width: 150, title: '客户名称'}
                        , {field: 'outline', width: 250, title: '概要'}
                        , {field: 'eleUser', width: 80, title: '创建人', templet: function (d) {
                                return d.eleUser.userName;
                            }
                        }
                        , {field: 'creationTime', width: 160, title: '创建时间'}
                        , {field: 'eleDictionary', width: 120, title: '服务类型', templet: function (d) {
                                return d.eleDictionary.entry;
                            }
                        }
                        , {toolbar: '#barDemo', title: '操作'}
                    ]]
                });
                table.on('tool(distriTable)', function (obj) {
                    //  获取点击行的数据
                    var data = obj.data;
                    //  获取点击的lay-event属性值
                    var layEvent = obj.event;

                    if (layEvent === 'del') {  // 删除
                        layer.confirm('真的要删除吗？', function (index) {
                            //  关闭当前弹窗
                            layer.close(index);
                            //  发送异步请求
                            $.post("http://localhost:8888/service/delete", {serviceId:data.serviceId}, function (da) {
                                table.reload("distriTable",{
                                    page: {
                                        curr: 1
                                    }
                                });
                            });
                        });
                    } else if (layEvent === 'distri') {  // 分配
                        layer.open({
                            type: 1,
                            title: "分配",
                            skin: "layui-layer-molv",
                            anim: 0,
                            area: "450px",
                            maxmin: true,
                            content: $("#distri"),
                            btn: ['确定','取消'],
                            success: function () {
                                form.val('distriForm',data);
                                $("#serviceState").val(2);
                                $("#distriTime").val(dates());
                            },
                            yes : function () {
                                var str = $("#distriForm").serialize();
                                $.post(`${new Config().base_url}/service/addDistriId`, str, das => {
                                    layer.close(layer.index);
                                    table.reload("distriTable");
                                });
                            }
                        });
                    }
                });
            });
            function selects(){
                table.reload("distriTable",{
                    page: {
                        //  从第一页开始
                        curr: 1
                    }
                    ,where: {
                        customerName : $("#customerName").val(),
                        outline : $("#outline").val(),
                        serviceType : $("#serviceType").val()
                    }
                });
            }
        </script>

        <!--  分配、删除  -->
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="distri" title="分配"><span class="fontawesome-group"></span></a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除"><span class="fontawesome-remove"></span></a>
        </script>
    </div>
</body>
</html>